
<template>
  <div class="panel">
    <div class="warp">  <span v-for="(item,i) in list" :key="i" @click="toPage(item)" :style="getStyle()">{{ item.includes("http")?item.split("|")[0]:item }}</span></div>    
  </div>
</template>

<script> 
/*
杂志导航区
资源区
功能区
UI区
插件区
仓库区
*/
var all = `
前端印记|https://www.htmltrip.com,
前端进阶之旅|https://interview.poetries.top,
AUX,DevUI,layer-vue,layer,Antd,element,element-plus,react,vue,mui,weui,vant2,编程导航,
vcc|https://vcc.sahadev.tech,
markdown|http://coolaf.com/tool/md,
report|https://weeklyreport.avemaria.fun/zh,
uview|iview,
vxe-table,handsontable,
Three.js|http://www.webgl3d.cn/Three.js,
antv|https://antv.vision/zh,
vant|https://vant-contrib.gitee.io/vant/v2/#/zh-CN/,
nutui|https://nutui.jd.com,
naiveui|https://www.naiveui.com,
cursor
`
export default {
  data () {
    return {
       list :[]
    }
  },
  created(){
    //this.list = all.trim().split(",").sort((a,b)=>a[0].localeCompare(b[0]))
    this.list = all.trim().split(",").sort((a,b)=>a.toLowerCase()-b.toLowerCase())
  },
  methods: {
      getStyle(){
        var color = '#'+Math.floor(Math.random()*16777215).toString(16)
        return `border: 1px solid ${color};color:${color}` 
      },
      toPage(item){
          if(item.includes("http")){
            window.open(item.split("|")[1])
          }else{
            window.open(`https://www.baidu.com/s?wd=${item} 官网`)
          }
      }
  },
      
}
</script>

<style> 
html{
  background: #eee;
}
.warp{
  cursor: pointer;
  font-size: 12px;
}
.warp span{
  display: inline-block;
  padding:2px 5px;
  margin:5px;
  border-radius: 50px; 
}
.warp span:hover{
  transform: scale(1.2);
}
</style>